<style>
	.deep{
		opacity: 1;
	}
	.shallow{
		opacity: 0.7;
	}
</style>
<div id="shop">
    <div class="ng-scope">
        <div class="loca ng-scope">
            <a class="change ng-binding" href="#">懒虫商城<span>[切换]</span></a>
        </div>
        <div class="content ng-scope">
            <aside style="height:663px">
                <ul id="aside">
                    <li v-for="(category, index) in categoryList" @click="changeCss(category.id, index)" :class="index==0?'table active':'table'" data-cid="1" data-ident="0">
                        <p>{{category.categoryName}}</p>
                    </li>
                </ul>
            </aside>

            <section>
                <ul v-for="(category, index) in categoryList" id="lists_1" class="lists">
                	<label :id="category.id">..{{category.categoryName}}</label>
                    <li price="2.98" v-for="(goods, i) in category.goodsList" :class="goods.goodsStatus == 0?'shallow':'deep'">
                        <div class="l view">
                            <a href="#" target="_blank"><img :src="goods.goodsLogo" class="img-responsive" alt="..." /></a>
                        </div>
                        <div class="r">
                            <p class="t">{{goods.goodsName}}</p>
                            <p class="price">￥{{goods.goodsPrice}}</p>
                            <div class="jifen">送积分：0</div>
                            <div class="showaddcart">
                                <img  @click="change(goods.id, goods.goodsPrice)" :cart="goods.id" v-show="goods.goodsStatus == 1 && goods.userNumber == 0" src="img/shop_cart02.png" class="img-responsive join" alt="..." />
                                <div class="num_con" :name="goods.id" v-show="goods.goodsStatus == 1 && goods.userNumber != 0">
                                    <img @click="add(0, goods.id, goods.goodsPrice)" src="img/num_l.png" :left="goods.id"  class="img-responsive num_l" alt="..." />
                                    <span :number="goods.id" class="number">{{goods.userNumber}}</span>
                                    <img @click="add(1, goods.id, goods.goodsPrice)" src="img/num_r.png" :right="goods.id" class="img-responsive num_r" alt="..." />
                                </div>
                                <div class="num_con" v-show="goods.goodsStatus == 0">已售罄</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
            <div class="clear"></div>
        </div>
    </div>
    <!--底部结算导航-->
    <div class="cart ng-scope" style="margin-bottom: 50px;">
        <div class="r" id="settlement"><a href="#" onclick="switchCart()"></a></div>
        <div class="l ng-binding">
            ￥<label id="totalmoney">{{cartInfo.price}}</label>
        </div>
        <i id="totalcartnumber" class="ng-binding cartnum">{{cartInfo.number}}</i>
        <a href="#" onclick=""><img src="img/shop_cart01.png" alt="..."></a>
    </div>
    <!--/底部结算导航-->
</div>
<script type="text/javascript" src="js/custom.js"></script>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#shop",
        data: {
            categoryList: [],
    		cartInfo:{}
        },
        methods: {
            changeCss(id, index){
                $("#aside li").removeClass("active");
                var i = "#aside li:eq("+index+")";
                $(i).addClass("active");
                location.href="#" + id;
            },
            change(id, price){//点击小的购物车
                $(".showaddcart img[cart=" + id +"]").hide();
                $(".showaddcart div[name=" + id +"]").show();
                $(".showaddcart span[number=" + id +"]").text(1);
                //计算总价和数量
                CountNumPrice(1, price);
                //购物车该商品加1
                addCart(id);
                changeSettlement();
                
            },
            add(flag, id, price){ //购物车＋-
                if(flag == 1){//+1
                    var i = parseInt($(".showaddcart span[number=" + id +"]").text());
                    $(".showaddcart span[number=" + id +"]").text(i+1);
                    //购物车该商品加1
                    addCart(id);
                }
                if(flag == 0){//-1
                    var j = parseInt($(".showaddcart span[number=" + id +"]").text());
                    $(".showaddcart span[number=" + id +"]").text(j-1);
                    if(j == 1) {//减到0
                        $(".showaddcart img[cart=" + id + "]").show();
                        $(".showaddcart div[name=" + id + "]").hide();
                    }
                    //购物车减1
                    subtractCart(id);
                }
                //计算总价和数量
                CountNumPrice(flag, price);
                changeSettlement();
            }
        }
    })

    $(function () {
        getAllCategoryGoods();
		getCartInfo();
    })
    //获取所有分类
    function getAllCategoryGoods() {
        let url = "category/doFindAllCategoryGoods";
        $.getJSON(url, function (result) {
            console.log(result);
            vm.categoryList = result.data;
            $("#aside li:eq(0)").addClass("active");
        })
    }
    //获取购物车信息（去结算）
    function getCartInfo(){
    	let url = "cartItem/doFindCartInfo";
        $.getJSON(url, function (result) {
            console.log(result);
            vm.cartInfo = result.data;
        })
        //去结算判断
        setTimeout("changeSettlement()", 200);
    }
    //计算数量和价格
    function CountNumPrice(flag, price) {
        var num = parseInt($("#totalcartnumber").text());
        var p = parseFloat($("#totalmoney").text());
        if(flag == 1){//+
            $("#totalcartnumber").text(num + 1);
            $("#totalmoney").text(p + price);
        }else{//-
            $("#totalcartnumber").text(num - 1);
            $("#totalmoney").text(p - price);
        }
    }
    //切换到购物车
    function switchCart(){
        $("#mainContent").load("doCartUI");
    }
    function addCart(id) {
        let url = "cartItem/doAddCartItem";
        let params = {
            goodsId: id
        }
        $.post(url, params, function (result) {
            console.log(result);
        })

    }
    function subtractCart(id) {
        let url = "cartItem/doSubtractCartItem";
        let params = {
            goodsId: id
        }
        $.post(url, params, function (result) {
            console.log(result);
        })

    }
    //判断有没有选中商品
    function changeSettlement(){
    	if(parseInt($("#totalcartnumber").text()) == 0){
        	$("#settlement a").text("未选购商品");
        	$("#settlement").css("opacity", "0.5");
        	$("#settlement a").attr('onclick', '');
        }else{
        	$("#settlement a").text("去结算");
        	$("#settlement").css("opacity", "1");
        	$("#settlement a").attr('onclick', 'switchCart()');
        }
    }



</script>
